<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>8.天气作业简化版</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <h1>今天天气:{{weather}}</h1>
      <h1>温馨提示:{{str}}</h1>
      <button @click="change">点击切换</button>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;


    new Vue({
      el: "#app",
      data: {
        bol: true,
        str: "",
      },
      methods: {
        change() {
          this.bol = !this.bol;
        },
      },
      computed: {
        weather(){
            return this.bol ? "炎热" : "冷";
        },
      },
      watch:{
        bol: {
          handler() {
            this.str = this.bol ? "少穿点衣服" : "多穿点衣服";
          },
          immediate:true  // 立即执行
        },
      }
      
    
          
    });
  </script>
</html>
